<!--
  module - OA用户管理列表列表

  @author mengft 2020-05-14
-->
<template>
  <div>
    <div class="search-bar">
      <div class="base-condition">
        <el-row justify="space-between">
          <el-col :span="12">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="1">全部OA用户</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="12" style="text-align:right;">
            <el-checkbox v-model="listQuery.isBind" @change="search">未绑定用户</el-checkbox>
            <el-input
              v-model="listQuery.userName"
              placeholder="请输第三方用户名称"
              class="radius-input"
              style="width: 200px;margin-top:7px;margin-left:15px;"
              @keyup.enter.native="search"
            >
              <i slot="prefix" class="el-input__icon el-icon-search" @click="search" /></el-input>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>OA用户列表<em>（共{{ total }}条记录）</em></span>
      </div>
      <div>
        <el-row :gutter="20">
          <el-col :span="leftWide">
            <!-- start 列表 -->
            <el-table
              v-loading="listLoading"
              :data="list"
              style="width: 100%"
              lazy
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
              <!-- <el-table-column type="index" width="50" label="#" align="center" /> -->
              <el-table-column label="应用端Key" prop="appKey" :width="200" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="三方用户名" prop="userName" :width="240" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="最近一次访问时间" :width="250" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope">
                  <div>{{ scope.row.lastEditTime|parseTime }}</div>
                </template>
              </el-table-column>
              <el-table-column label="关联的角色" prop="roleName" :width="240" :show-overflow-tooltip="true" align="center" />
              <el-table-column label="操作" class-name="small-padding fixed-width" :width="400" align="left">
                <template slot-scope="scope">
                  <template>
                    <el-link v-if="!scope.row.roleId" type="primary" size="mini" @click="bindSysRole(scope.row)">
                      绑定角色
                    </el-link>
                    <el-link v-if="scope.row.roleId" type="primary" size="mini" @click="unbundleRole(scope.row)">
                      解绑
                    </el-link>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row type="flex" justify="end" style="margin-top:15px;">
          <!-- start 分页 -->
          <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" style="text-align:right;" @pagination="queryThirdUserList" />
          <!-- end 分页 -->
        </el-row>
      </div>

      <BindRole :user-id="userId" :dialog-table-visible="dialogTableVisible" @queryThirdUserList="queryThirdUserList" @dialogTableVisible="dialogTableVisible = false" />
    </el-card>
  </div>
</template>

<script>

// api
import { queryThirdUserList, delThirdUserRelation } from '@/api/third/thirdUser'

// 分页组件
import Pagination from '@/components/Pagination'
import BindRole from './bindRole'
// 水波纹插件
// import waves from '@/directive/waves'

export default {
  name: 'ThirdUser',
  components: { Pagination, BindRole },
  // directives: { waves },
  data() {
    return {
      activeIndex: '1',
      listLoading: true,
      list: [],
      listQuery: {
        userName: '',
        isBind: false,
        page: 1,
        limit: 10
      },
      total: 0,
      leftWide: 24,
      roleId: '',
      userId: '',
      dialogTableVisible: false
    }
  },
  created() {
    this.queryThirdUserList()
  },
  methods: {
    queryThirdUserList() {
      const curVue = this
      curVue.listLoading = true
      queryThirdUserList(this.listQuery).then(res => {
        if (res.code === 1) {
          curVue.listLoading = false
          curVue.list = res.data.thirdUserList
          curVue.total = res.data.totalCount
        } else {
          curVue.noticeUtil.errorMsg(res.mesg)
        }
      })
    },
    search() {
      this.queryThirdUserList()
    },
    bindSysRole(data) {
      this.userId = data.userId
      this.dialogTableVisible = true
    },
    dialogchange(dialogchange) {
      this.dialogTableVisible = dialogchange
    },
    unbundleRole(data) {
      this.noticeUtil.confirm('你确定解绑此OA用户?').then(() => {
        delThirdUserRelation({ thirdUserId: data.userId }).then(res => {
          if (res.code === 1) {
            this.noticeUtil.successMsg('解绑成功！')
            this.queryThirdUserList()
          } else {
            this.noticeUtil.errorMsg(res.mesg)
          }
        })
      }).catch(() => {
        this.noticeUtil.warningMsg('已取消操作！')
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.search-bar{
  position: relative;
  z-index: 2;
  width: 100%;
  .base-condition{
    padding: 0 40px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.14);
    .el-menu-demo,.el-menu-demo *{
      line-height: 50px;
      height: 50px;

      .el-menu-item{
        padding: 0 8px;
        margin-right: 20px;
      }
    }
  }
  .more-condition{
    position: absolute;
    top: 65px;
    background: #fff;
    width: 100%;
    height: auto;
    padding: 20px 40px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.14);
  }
  .query-result{
    margin-top: 5px;
    font-size: 12px;
    color: #4c596e;
    padding: 15px 30px;
    background: #fbfdff;
  }
  .query-result *{
    line-height: 25px;
  }
  .filter-item{
    display: inline-block;
    padding: 0 10px;
    margin-left: 10px;
    border-radius: 12px;
    background: #e5e9f2;
    color: #7f8997;
  }
  .filter-item i{
    margin-left: 5px;
    font-weight: 700;
    cursor: pointer;
  }

}
.radius-input >>> input{
  border-radius: 100px !important;
}
</style>
<style scoped>
.radius-input >>> input{
      border-radius: 100px !important;
    }
</style>

